<template>
    <el-scrollbar height="400px">
        <div class="divCss1">
            <el-text class="text1">配置文件选择</el-text>
            <el-select class="select1" v-model="selectvalue_1" placeholder="请选择版本" @change="handleSelect1Change">
                <el-option v-for="item in getJsonMsgArr" :key="item.version" :label="item.version"
                    :value="item.version" />
            </el-select>
            <el-button type="primary" class="el-bt1" plain>加载配置</el-button>
        </div>
        <div class="divCss1">
            <el-text class="text2">自主飞行、变质量选择</el-text>
            <el-popover v-model:visible="popoverVisible_1" placement="right" trigger="click" :width="400">
                <!-- 多选框内容 -->
                <el-scrollbar height="90px">
                    <el-checkbox-group v-model="checkedItems_1">
                        <el-checkbox v-for="item in options_1" :key="item.uuid" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-scrollbar>

                <!-- 底部操作按钮（可选） -->
                <div style="margin-top: 10px; text-align: right;">
                    <el-button size="small" @click="popoverVisible_1 = false">取消</el-button>
                    <el-button size="small" type="primary" @click="confirmSelection_1">确认</el-button>
                </div>

                <!-- 触发按钮的插槽 -->
                <template #reference>
                    <el-button type="primary" class="el-bt1" plain>选择参数</el-button>
                </template>
            </el-popover>
            <el-divider />
            <!-- 显示已选结果 -->
            <div v-for="itemChecked in checkedItems_1" style="margin-top: 10px;">
                <el-text class="text3" size="small">{{ itemChecked.name }}</el-text>
                <el-select v-if="itemChecked.editor.type === 'combox'" v-model="itemChecked.default" size="small"
                    class="select2">
                    <el-option v-for="opt in itemChecked.editor.options" :key="opt.value"
                        :label="opt.value + ':' + opt.label" :value="opt.value" />
                </el-select>
                <el-input v-if="itemChecked.editor.type === 'textbox'" v-model="itemChecked.default" size="small"
                    style="width: 150px;margin-left: 10px;" placeholder="Please input" @input="handleInputChange_1" />
            </div>
        </div>
        <div class="divCss1">
            <el-text class="text2">OPTION</el-text>
            <el-popover v-model:visible="popoverVisible_2" placement="right" trigger="click" :width="400">
                <!-- 多选框内容 -->
                <el-scrollbar height="90px">
                    <el-checkbox-group v-model="checkedItems_2">
                        <el-checkbox v-for="item in options_2" :key="item.uuid" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-scrollbar>

                <!-- 底部操作按钮（可选） -->
                <div style="margin-top: 10px; text-align: right;">
                    <el-button size="small" @click="popoverVisible_2 = false">取消</el-button>
                    <el-button size="small" type="primary" @click="confirmSelection_2">确认</el-button>
                </div>

                <!-- 触发按钮的插槽 -->
                <template #reference>
                    <el-button type="primary" class="el-bt1" plain>选择参数</el-button>
                </template>
            </el-popover>
            <el-divider />
            <!-- 显示已选结果 -->
            <div v-for="itemChecked in checkedItems_2" style="margin-top: 10px;">
                <el-text class="text3" size="small">{{ itemChecked.name }}</el-text>
                <el-select v-if="itemChecked.editor.type === 'combox'" v-model="itemChecked.default" size="small"
                    class="select2">
                    <el-option v-for="opt in itemChecked.editor.options" :key="opt.value"
                        :label="opt.value + ':' + opt.label" :value="opt.value" />
                </el-select>
                <el-input v-if="itemChecked.editor.type === 'textbox'" v-model="itemChecked.default" size="small"
                    style="width: 150px;margin-left: 10px;" placeholder="Please input" @input="handleInputChange_2" />
            </div>
        </div>
        <div class="divCss1">
            <el-text class="text2">任务规划路径</el-text>
            <el-popover v-model:visible="popoverVisible_3" placement="right" trigger="click" :width="400">
                <!-- 多选框内容 -->
                <el-scrollbar height="90px">
                    <el-checkbox-group v-model="checkedItems_3">
                        <el-checkbox v-for="item in options_3" :key="item.uuid" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-scrollbar>

                <!-- 底部操作按钮（可选） -->
                <div style="margin-top: 10px; text-align: right;">
                    <el-button size="small" @click="popoverVisible_3 = false">取消</el-button>
                    <el-button size="small" type="primary" @click="confirmSelection_3">确认</el-button>
                </div>

                <!-- 触发按钮的插槽 -->
                <template #reference>
                    <el-button type="primary" class="el-bt1" plain>选择参数</el-button>
                </template>
            </el-popover>
            <el-divider />
            <!-- 显示已选结果 -->
            <div v-for="itemChecked in checkedItems_3" style="margin-top: 10px;">
                <el-text class="text3" size="small">{{ itemChecked.name }}</el-text>
                <el-select v-if="itemChecked.editor.type === 'combox'" v-model="itemChecked.default" size="small"
                    class="select2">
                    <el-option v-for="opt in itemChecked.editor.options" :key="opt.value"
                        :label="opt.value + ':' + opt.label" :value="opt.value" />
                </el-select>
                <el-input v-if="itemChecked.editor.type === 'textbox'" v-model="itemChecked.default" size="small"
                    style="width: 150px;margin-left: 10px;" placeholder="Please input" @input="handleInputChange_3" />
            </div>
        </div>
        <div class="divCss1">
            <el-text class="text2">故障</el-text>
            <el-popover v-model:visible="popoverVisible_4" placement="right" trigger="click" :width="400">
                <!-- 多选框内容 -->
                <el-scrollbar height="90px">
                    <el-checkbox-group v-model="checkedItems_4">
                        <el-checkbox v-for="item in options_4" :key="item.uuid" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-scrollbar>

                <!-- 底部操作按钮（可选） -->
                <div style="margin-top: 10px; text-align: right;">
                    <el-button size="small" @click="popoverVisible_4 = false">取消</el-button>
                    <el-button size="small" type="primary" @click="confirmSelection_4">确认</el-button>
                </div>

                <!-- 触发按钮的插槽 -->
                <template #reference>
                    <el-button type="primary" class="el-bt1" plain>选择参数</el-button>
                </template>
            </el-popover>
            <el-divider />
            <!-- 显示已选结果 -->
            <div v-for="itemChecked in checkedItems_4" style="margin-top: 10px;">
                <el-text class="text3" size="small">{{ itemChecked.name }}</el-text>
                <el-select v-if="itemChecked.editor.type === 'combox'" v-model="itemChecked.default" size="small"
                    class="select2">
                    <el-option v-for="opt in itemChecked.editor.options" :key="opt.value"
                        :label="opt.value + ':' + opt.label" :value="opt.value" />
                </el-select>
                <el-input v-if="itemChecked.editor.type === 'textbox'" v-model="itemChecked.default" size="small"
                    style="width: 150px;margin-left: 10px;" placeholder="Please input" @input="handleInputChange_4" />
                <!-- 多选下拉框（带全选） -->
                <el-select v-else-if="itemChecked.editor.type === 'bits'" v-model="itemChecked.default" multiple
                    clearable collapse-tags placeholder="Select" popper-class="custom-header" :max-collapse-tags="1"
                    size="small" class="select2" @change="handleSelectChange_4(itemChecked)">
                    <template #header>
                        <el-checkbox v-model="itemChecked.checkAll" :indeterminate="itemChecked.indeterminate"
                            @change="(val: any) => handleCheckAllChange_4(val, itemChecked)">
                            All
                        </el-checkbox>
                    </template>
                    <el-option v-for="item in itemChecked.editor.options" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
        </div>
        <div class="divCss1">
            <el-text class="text2">马赫 高度等参数</el-text>
            <el-popover v-model:visible="popoverVisible_5" placement="right" trigger="click" :width="400">
                <!-- 多选框内容 -->
                <el-scrollbar height="90px">
                    <el-checkbox-group v-model="checkedItems_5">
                        <el-checkbox v-for="item in options_5" :key="item.uuid" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-scrollbar>

                <!-- 底部操作按钮（可选） -->
                <div style="margin-top: 10px; text-align: right;">
                    <el-button size="small" @click="popoverVisible_5 = false">取消</el-button>
                    <el-button size="small" type="primary" @click="confirmSelection_5">确认</el-button>
                </div>

                <!-- 触发按钮的插槽 -->
                <template #reference>
                    <el-button type="primary" class="el-bt1" plain>选择参数</el-button>
                </template>
            </el-popover>
            <el-divider />
            <!-- 显示已选结果 -->
            <div v-for="itemChecked in checkedItems_5" style="margin-top: 10px;">
                <el-text class="text3" size="small">{{ itemChecked.name }}</el-text>
                <el-select v-if="itemChecked.editor.type === 'combox'" v-model="itemChecked.default" size="small"
                    class="select2">
                    <el-option v-for="opt in itemChecked.editor.options" :key="opt.value"
                        :label="opt.value + ':' + opt.label" :value="opt.value" />
                </el-select>
                <el-input v-if="itemChecked.editor.type === 'textbox'" v-model="itemChecked.default" size="small"
                    style="width: 150px;margin-left: 10px;" placeholder="Please input" @input="handleInputChange_5" />
                <!-- 多选下拉框（带全选） -->
                <el-select v-else-if="itemChecked.editor.type === 'bits'" v-model="itemChecked.default" multiple
                    clearable collapse-tags placeholder="Select" popper-class="custom-header" :max-collapse-tags="1"
                    size="small" class="select2" @change="handleSelectChange_5(itemChecked)">
                    <template #header>
                        <el-checkbox v-model="itemChecked.checkAll" :indeterminate="itemChecked.indeterminate"
                            @change="(val: any) => handleCheckAllChange_5(val, itemChecked)">
                            All
                        </el-checkbox>
                    </template>
                    <el-option v-for="item in itemChecked.editor.options" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
        </div>
        <div class="divCss1">
            <el-text class="text2">气动参数</el-text>
            <el-popover v-model:visible="popoverVisible_6" placement="right" trigger="click" :width="400">
                <!-- 多选框内容 -->
                <el-scrollbar height="90px">
                    <el-checkbox-group v-model="checkedItems_6">
                        <el-checkbox v-for="item in options_6" :key="item.uuid" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-scrollbar>

                <!-- 底部操作按钮（可选） -->
                <div style="margin-top: 10px; text-align: right;">
                    <el-button size="small" @click="popoverVisible_6 = false">取消</el-button>
                    <el-button size="small" type="primary" @click="confirmSelection_6">确认</el-button>
                </div>

                <!-- 触发按钮的插槽 -->
                <template #reference>
                    <el-button type="primary" class="el-bt1" plain>选择参数</el-button>
                </template>
            </el-popover>
            <el-divider />
            <!-- 显示已选结果 -->
            <div v-for="itemChecked in checkedItems_6" style="margin-top: 10px;">
                <el-text class="text3" size="small">{{ itemChecked.name }}</el-text>
                <el-select v-if="itemChecked.editor.type === 'combox'" v-model="itemChecked.default" size="small"
                    class="select2">
                    <el-option v-for="opt in itemChecked.editor.options" :key="opt.value"
                        :label="opt.value + ':' + opt.label" :value="opt.value" />
                </el-select>
                <el-input v-if="itemChecked.editor.type === 'textbox' || itemChecked.editor.type === 'checkbox'"
                    v-model="itemChecked.default" size="small" style="width: 150px;margin-left: 10px;"
                    placeholder="Please input" @input="handleInputChange_6" />
                <!-- 多选下拉框（带全选） -->
                <el-select v-else-if="itemChecked.editor.type === 'bits'" v-model="itemChecked.default" multiple
                    clearable collapse-tags placeholder="Select" popper-class="custom-header" :max-collapse-tags="1"
                    size="small" class="select2" @change="handleSelectChange_6(itemChecked)">
                    <template #header>
                        <el-checkbox v-model="itemChecked.checkAll" :indeterminate="itemChecked.indeterminate"
                            @change="(val: any) => handleCheckAllChange_6(val, itemChecked)">
                            All
                        </el-checkbox>
                    </template>
                    <el-option v-for="item in itemChecked.editor.options" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
        </div>
        <div class="divCss1">
            <el-text class="text2">配平</el-text>
            <el-popover v-model:visible="popoverVisible_7" placement="right" trigger="click" :width="400">
                <!-- 多选框内容 -->
                <el-scrollbar height="90px">
                    <el-checkbox-group v-model="checkedItems_7">
                        <el-checkbox v-for="item in options_7" :key="item.uuid" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-scrollbar>

                <!-- 底部操作按钮（可选） -->
                <div style="margin-top: 10px; text-align: right;">
                    <el-button size="small" @click="popoverVisible_7 = false">取消</el-button>
                    <el-button size="small" type="primary" @click="confirmSelection_7">确认</el-button>
                </div>

                <!-- 触发按钮的插槽 -->
                <template #reference>
                    <el-button type="primary" class="el-bt1" plain>选择参数</el-button>
                </template>
            </el-popover>
            <el-divider />
            <!-- 显示已选结果 -->
            <div v-for="itemChecked in checkedItems_7" style="margin-top: 10px;">
                <el-text class="text3" size="small">{{ itemChecked.name }}</el-text>
                <el-select v-if="itemChecked.editor.type === 'combox'" v-model="itemChecked.default" size="small"
                    class="select2">
                    <el-option v-for="opt in itemChecked.editor.options" :key="opt.value"
                        :label="opt.value + ':' + opt.label" :value="opt.value" />
                </el-select>
                <el-input v-if="itemChecked.editor.type === 'textbox' || itemChecked.editor.type === 'checkbox'"
                    v-model="itemChecked.default" size="small" style="width: 150px;margin-left: 10px;"
                    placeholder="Please input" @input="handleInputChange_7" />
                <!-- 多选下拉框（带全选） -->
                <el-select v-else-if="itemChecked.editor.type === 'bits'" v-model="itemChecked.default" multiple
                    clearable collapse-tags placeholder="Select" popper-class="custom-header" :max-collapse-tags="1"
                    size="small" class="select2" @change="handleSelectChange_7(itemChecked)">
                    <template #header>
                        <el-checkbox v-model="itemChecked.checkAll" :indeterminate="itemChecked.indeterminate"
                            @change="(val: any) => handleCheckAllChange_7(val, itemChecked)">
                            All
                        </el-checkbox>
                    </template>
                    <el-option v-for="item in itemChecked.editor.options" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
        </div>
        <div class="divCss1">
            <el-text class="text2">加风</el-text>
            <el-popover v-model:visible="popoverVisible_8" placement="right" trigger="click" :width="400">
                <!-- 多选框内容 -->
                <el-scrollbar height="90px">
                    <el-checkbox-group v-model="checkedItems_8">
                        <el-checkbox v-for="item in options_8" :key="item.uuid" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-scrollbar>

                <!-- 底部操作按钮（可选） -->
                <div style="margin-top: 10px; text-align: right;">
                    <el-button size="small" @click="popoverVisible_8 = false">取消</el-button>
                    <el-button size="small" type="primary" @click="confirmSelection_8">确认</el-button>
                </div>

                <!-- 触发按钮的插槽 -->
                <template #reference>
                    <el-button type="primary" class="el-bt1" plain>选择参数</el-button>
                </template>
            </el-popover>
            <el-divider />
            <!-- 显示已选结果 -->
            <div v-for="itemChecked in checkedItems_8" style="margin-top: 10px;">
                <el-text class="text3" size="small">{{ itemChecked.name }}</el-text>
                <el-select v-if="itemChecked.editor.type === 'combox'" v-model="itemChecked.default" size="small"
                    class="select2" @change="handleSelect8Change(itemChecked.default)">
                    <el-option v-for="opt in itemChecked.editor.options" :key="opt.value"
                        :label="opt.value + ':' + opt.label" :value="opt.value">
                    </el-option>
                </el-select>
                <div>
                    <JiaFeng v-if="itemChecked.default === '1'" :childs="itemChecked.editor.childs"
                        :chlidsIndex="itemChecked.default" />
                    <JiaFeng v-if="itemChecked.default === '2'" :childs="itemChecked.editor.childs"
                        :chlidsIndex="itemChecked.default" />
                    <JiaFeng v-if="itemChecked.default === '3'" :childs="itemChecked.editor.childs"
                        :chlidsIndex="itemChecked.default" />
                    <JiaFeng v-if="itemChecked.default === '4'" :childs="itemChecked.editor.childs"
                        :chlidsIndex="itemChecked.default" />
                    <JiaFeng v-if="itemChecked.default === '5'" :childs="itemChecked.editor.childs"
                        :chlidsIndex="itemChecked.default" />
                </div>
            </div>
        </div>
        <div class="divCss1">
            <el-button type="primary" class="el-bt2" plain @click="handleshowBalance">配平反馈</el-button>
            <el-button type="primary" class="el-bt3" plain @click="handleshowaction">动作</el-button>
            <el-divider />
            <div v-if="showContent === 'balance'">
                <el-text class="text2">这里是配平反馈的内容</el-text>
                <el-popover v-model:visible="popoverVisible_9" placement="right" trigger="click" :width="400">
                    <!-- 多选框内容 -->
                    <el-scrollbar height="90px">
                        <el-checkbox-group v-model="checkedItems_9">
                            <el-checkbox v-for="item in options_9" :key="item.uuid" :label="item.name" :value="item">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-scrollbar>

                    <!-- 底部操作按钮（可选） -->
                    <div style="margin-top: 10px; text-align: right;">
                        <el-button size="small" @click="popoverVisible_9 = false">取消</el-button>
                        <el-button size="small" type="primary" @click="confirmSelection_9">确认</el-button>
                    </div>

                    <!-- 触发按钮的插槽 -->
                    <template #reference>
                        <el-button type="primary" class="el-bt1" plain>选择参数</el-button>
                    </template>
                </el-popover>
                <el-divider />
                <!-- 显示已选结果 -->
                <div v-for="itemChecked in checkedItems_9" style="margin-top: 10px;">
                    <el-text class="text3" size="small">{{ itemChecked.name }}</el-text>
                    <el-select v-if="itemChecked.editor.type === 'combox'" v-model="itemChecked.default" size="small"
                        class="select2" @change="handleSelectChange_91(itemChecked.default)">
                        <el-option v-for="opt in itemChecked.editor.options" :key="opt.value"
                            :label="opt.value + ':' + opt.label" :value="opt.value" />
                    </el-select>
                    <div>
                        <PeiPingFanKui v-if="itemChecked.default === 'L'" :childs="itemChecked.editor.childs"
                            :chlidsIndex="itemChecked.default" />
                        <PeiPingFanKui v-if="itemChecked.default === 'E'" :childs="itemChecked.editor.childs"
                            :chlidsIndex="itemChecked.default" />
                        <PeiPingFanKui v-if="itemChecked.default === 'F'" :childs="itemChecked.editor.childs"
                            :chlidsIndex="itemChecked.default" />
                        <PeiPingFanKui v-if="itemChecked.default === '\\\n'" :childs="itemChecked.editor.childs"
                            :chlidsIndex="itemChecked.default" />
                    </div>
                </div>
            </div>
            <div v-else-if="showContent === 'action'">
                <el-text class="text2">这里是动作控制的内容</el-text>
            </div>
        </div>
    </el-scrollbar>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { useVarChooseStore } from '@/store/varChoose'
import { storeToRefs } from "pinia";
import JiaFeng from '@/components/JiaFeng.vue';
import PeiPingFanKui from '@/components/PeiPingFanKui.vue';
import useDiv1 from "@/hooks/useDiv1";
import useDiv2 from "@/hooks/useDiv2";
import useDiv3 from "@/hooks/useDiv3";
import useDiv4 from "@/hooks/useDiv4";
import useDiv5 from "@/hooks/useDiv5";
import useDiv6 from "@/hooks/useDiv6";
import useDiv7 from "@/hooks/useDiv7";
import useDiv8 from "@/hooks/useDiv8";
import useDiv9 from "@/hooks/useDiv9";

// 得到配置文件的信息，用pinia去存储
const varChooseStore = useVarChooseStore()
const { jsonMsg, getJsonMsgArr } = storeToRefs(varChooseStore)
await varChooseStore.getJsonMsg()
// console.log("144444.", jsonMsg.value)
// console.log("1444443333.", jsonMsg.value)
const selectvalue_1 = ref('')           //配置文件下拉框
// 存储选中数据的数组
const selectedDataArray = ref<any>([])
const { checkedItems_1, popoverVisible_1, options_1, confirmSelection_1, handleInputChange_1 } = useDiv1() //自主飞行模块
// 监听checkedItems_1变化，将选中的数据存储到selectedDataArray中
watch(checkedItems_1, (newVal: any) => {
    const newMap: any = {};
    newVal.forEach((item: any) => {
        newMap[item.name] = item.default;
    });

    // 将新对象赋值给 selectedDataArray
    selectedDataArray.value = newMap;
    console.log('selectedDataArray33333333:', selectedDataArray.value);
}, { deep: true })

const { checkedItems_2, popoverVisible_2, options_2, confirmSelection_2, handleInputChange_2 } = useDiv2() // 变质量模块
const { checkedItems_3, popoverVisible_3, options_3, confirmSelection_3, handleInputChange_3 } = useDiv3() // 任务规划路径模块
const { checkedItems_4, popoverVisible_4, options_4, confirmSelection_4, handleInputChange_4, handleCheckAllChange_4, handleSelectChange_4 } = useDiv4() // 故障模块
const { checkedItems_5, popoverVisible_5, options_5, confirmSelection_5, handleInputChange_5, handleCheckAllChange_5, handleSelectChange_5 } = useDiv5() // 马赫高度等参数模块
const { checkedItems_6, popoverVisible_6, options_6, confirmSelection_6, handleInputChange_6, handleCheckAllChange_6, handleSelectChange_6 } = useDiv6() // 配平反馈模块
const { checkedItems_7, popoverVisible_7, options_7, confirmSelection_7, handleInputChange_7, handleCheckAllChange_7, handleSelectChange_7 } = useDiv7() // 配平模块
const { checkedItems_8, popoverVisible_8, options_8, confirmSelection_8, handleSelect8Change } = useDiv8() // 加风模块
const { checkedItems_9, popoverVisible_9, options_9, confirmSelection_9, handleInputChange_9, handleSelectChange_91, handleCheckAllChange_9, handleSelectChange_9 } = useDiv9() // 动作模块

function handleSelect1Change() {
    //替换要加载的数据
    jsonMsg.value = getJsonMsgArr.value.find((item: any) => item.version === selectvalue_1.value)
    //清空之前选择的内容
    checkedItems_1.value = []
}

//配平反馈和动作  用一个变量记录当前显示哪个内容
const showContent = ref('');

function handleshowBalance() {
    showContent.value = 'balance'
}

function handleshowaction() {
    showContent.value = 'action'
}


</script>

<style scoped>
.el-text {
    color: rgb(28, 27, 27);
    font-size: 15px;
    font-weight: bold;
}

.divCss1 {
    margin-bottom: 15px;
}

.el-button.el-bt1 {
    margin-left: 10px;
}

.el-text.text1 {
    margin-left: 20px
}

.el-text.text2 {
    margin-bottom: 0px;
    margin-left: 20px
}

.el-text.text3 {
    margin-bottom: 0px;
    margin-left: 20px;
    font-size: 12px;
}

.el-select.select1 {
    margin-left: 20px;
    width: 140px;
    size: 50px;
}

.el-select.select2 {
    margin-left: 20px;
    width: 150px;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}

.el-button.el-bt2 {
    margin-left: 15px;
}
</style>
